<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}学生管理系统{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 15px;
        }
        .navbar-brand {
            font-weight: bold;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: none;
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .btn-action {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
        
        /* 手机端优化样式 */
        @media (max-width: 768px) {
            body {
                padding-top: 10px;
                padding-bottom: 20px;
            }
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            .navbar-nav {
                flex-direction: row;
                gap: 15px;
            }
            .navbar-nav .nav-link {
                padding: 0.5rem 0.8rem;
                font-size: 0.9rem;
            }
            .card-body {
                padding: 1rem;
            }
            .btn {
                padding: 0.5rem 1rem;
                font-size: 0.95rem;
            }
            .table-responsive {
                font-size: 0.9rem;
            }
            .btn-group .btn {
                margin-bottom: 5px;
            }
        }
        
        /* 超小屏幕优化 */
        @media (max-width: 576px) {
            .navbar-brand {
                font-size: 1.1rem;
            }
            .navbar-nav .nav-link {
                padding: 0.4rem 0.6rem;
                font-size: 0.85rem;
            }
            .card {
                margin-left: -10px;
                margin-right: -10px;
                border-radius: 0;
            }
            h2 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4 rounded">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ url_for('index') }}">
                    <i class="fas fa-graduation-cap me-2"></i>学生管理系统
                </a>
                <div class="navbar-nav ms-auto">
                {% if session.get('user_type') == 'student' %}
                <a class="nav-link text-white" href="{{ url_for('student_dashboard') }}">
                    <i class="fas fa-home me-1"></i>首页
                </a>
                {% else %}
                <a class="nav-link text-white" href="{{ url_for('admin_dashboard') }}">
                    <i class="fas fa-home me-1"></i>学生选课信息
                </a>
                {% endif %}
                {% if session.get('user_type') != 'student' %}
                <a class="nav-link text-white" href="{{ url_for('students_list') }}">
                    <i class="fas fa-users me-1"></i>学生列表
                </a>
                <a class="nav-link text-white" href="{{ url_for('courses') }}">
                    <i class="fas fa-book me-1"></i>课程管理
                </a>
                <a class="nav-link text-white" href="{{ url_for('statistics') }}">
                    <i class="fas fa-chart-bar me-1"></i>统计
                </a>
                {% if session.get('role') == 'super_admin' %}
                <a class="nav-link text-white" href="{{ url_for('admin_management') }}">
                    <i class="fas fa-user-shield me-1"></i>管理员
                </a>
                {% endif %}
                {% endif %}
                <a class="nav-link text-white" href="{{ url_for('selection') }}">
                    <i class="fas fa-tasks me-1"></i>选课中心
                </a>
                <a class="nav-link text-white" href="{{ url_for('change_password') }}">
                    <i class="fas fa-key me-1"></i>修改密码
                </a>
                {% if session.get('user_id') %}
                <a class="nav-link text-white" href="#" onclick="confirmLogout()">
                    <i class="fas fa-sign-out-alt me-1"></i>退出登录
                </a>
                {% endif %}
                </div>
            </div>
        </nav>

        <!-- 消息提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 自定义深蓝色主题样式 -->
        <style>
            .btn-primary {
                background-color: #0d6efd;
                border-color: #0d6efd;
            }
            .btn-primary:hover {
                background-color: #0b5ed7;
                border-color: #0a58ca;
            }
            .btn-outline-primary {
                color: #0d6efd;
                border-color: #0d6efd;
            }
            .btn-outline-primary:hover {
                background-color: #0d6efd;
                border-color: #0d6efd;
                color: white;
            }
            .alert-success {
                background-color: #d1e7dd;
                border-color: #badbcc;
                color: #0f5132;
            }
            .card {
                border-color: #0d6efd;
            }
            .card-header {
                background-color: #f8f9ff;
                border-bottom-color: #0d6efd;
            }
        </style>

        <!-- 主要内容 -->
        <div class="card">
            <div class="card-body">
                {% block content %}{% endblock %}
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="text-center mt-4 text-muted">
            <p>&copy; 2024 学生管理系统. 使用MongoDB和Flask构建.</p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function confirmLogout() {
        if (confirm('确定要退出登录吗？')) {
            window.location.href = "{{ url_for('logout') }}";
        }
    }
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>
